Technical Blog Part 3. Responsive design
- What a responsive site is, and why responsiveness is important.
- What mobile first design is, and why it's important.
- What frameworks are, and their pros and cons.
- What a wireframe is and why we use it.
- The aspects of your wireframes you found difficult to implement, and why.
Responsive website is a site created based on a design approach that gives excellent viewing experience across devices of all sizes. Users view websites on mobile phones, tables, desktop monitors, large screens, and it is important to give the best user experience no matter what on what screen size a website is open.
Mobile first design is an approach when a website layout is created for small screens first, and then scaled up for larger screens. As in most cases mobile devices are tend to be less powerful than devices with big screens, a website will be loading faster as it won't load extra code (@media queries); so @media queries will be loaded only for bigger screens, meaning there will be less unuseful code for mobile devices.
A framework is a set of rules and concepts that helps to build a website faster as it solves common type of difficulties. A framework provides a common structure that can be reused and amended. However, there are a few disadvantages of using a framework: unused code in your project, time consuming to learn rules of a particular framework.
Wireframe is a basic visual representation of elements on a website, and it helps to structure and create an information hierarchy. Wireframe examples are below.
Create a specific order of elements on mobile and desktop version is tricky, especially if you need to make it different for different screen sizes. Need to work more with floats.